<template>
	<view style="position: relative;">
		<!-- 轮播图 -->
		<view class="detail-swiper-box">
			<u-swiper :list="list" height="998"></u-swiper>
		</view>
		<!-- 标题 -->
		<view class="detail-text-box flex-jc-fc">
			<view class="flex-j-sb-as mg-lr-25">
				<text class="text-33-0f0f0f-b">复古蓝色皮衣职场御姐范</text>
				<u-icon name="share" color="#0F0F0F" size="32"></u-icon>
			</view>
			<view class="flex-js-as mg-lr-25 text-2-box">
				<text class="text-24-808080">进口税：商品已包税</text>
				<u-icon name="question-circle" color="#808080" size="32"></u-icon>
			</view>
			<view class="flex-j-sb-as mg-lr-25">
				<text class="text-33-0f0f0f-b">￥999.00</text>
				<text class="text-24-808080">已拼：255件</text>
			</view>
		</view>
		<u-gap height="20" bg-color="#F3F2F0"></u-gap>
		<!-- 拼团 -->
		<view class="pt-box">
			<u-cell-group>
				<u-cell-item title="5人正在拼团" value="查看更多" :border-bottom="false"></u-cell-item>
			</u-cell-group>
			<view class="mg-lr-25" v-for="(ptItem,index) in 3" :key="index">
				<view class="flex-j-sb-ac pt-box-3">
					<view class="pt-1-box flex-js-ac">
						<image src="../../../static/19.png" mode=""></image>
						<text class="text-24-333333 mg-r-25">她夏了夏天</text>
					</view>
					<view class="pt-2-box flex-jc-ae-fc">
						<text>还差1人拼成</text>
						<text>还剩00:57:54</text>
					</view>
					<view class="pt-3-box flex-jc-ac">
						<text>去参团</text>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#F3F2F0"></u-gap>
		<!-- 选择 型号、地址 -->
		<view class="address-box">
			<u-cell-group title="">
				<u-cell-item icon="../../../static/icon/goodIcon/fkIcon.png" title="现在付款，预计24小时内发货"
					label="杭州萧山区绿都国金中心2101 . 快递10.00" :arrow="false"></u-cell-item>
				<u-cell-item icon="../../../static/icon/goodIcon/sxsp.png" title="请选择颜色/尺码"></u-cell-item>
			</u-cell-group>
		</view>
		<u-gap height="20" bg-color="#F3F2F0"></u-gap>
		<view class="detail-box">
			<u-sticky offset-top="0">
				<view class="" style="background-color: white;">
					<view class="flex-js-ac detail-title-box mg-lr-25">
						<text class="text-40-F5CC4B-b">商品详情</text>
						<text class="text-40-F5CC4B-b"> | </text>
						<text class="text-40-4D4D4D-b" @click="evaluate">用户评价</text>
					</view>
				</view>
			</u-sticky>

			<view class="" style="height: 10000rpx;">
				富文本
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		methods: {
			evaluate(){
				uni.navigateTo({
					url:"/pages/home/user-evaluate/user-evaluate"
				})
			}
		}
	}
</script>

<style>
	.detail-swiper-box {}

	.detail-text-box {
		height: 240rpx;
		width: 100%;
	}

	.text-2-box {
		margin-top: 20rpx;
		margin-bottom: 35rpx;
	}

	.text-2-box>:nth-child(1) {
		margin-right: 10rpx;
	}

	.pt-box {
		/* height: 365rpx; */

	}

	.pt-box-3 {
		height: 100rpx;
		background-color: #F3F2F0;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.pt-1-box {}

	.pt-1-box>image {
		height: 70rpx;
		width: 70rpx;
		border-radius: 50%;
		margin-left: 36rpx;
		margin-right: 20rpx;
	}

	.pt-2-box {}

	.pt-3-box {
		width: 120rpx;
		height: 50rpx;
		background: #F5CC4B;
		border-radius: 10rpx;
		margin-right: 37rpx;
	}

	.address-box {}

	.detail-box {
		margin-top: 50rpx;
	}

	.detail-title-box {
		height: 80rpx;
	}

	.detail-title-box>:nth-child(2) {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.fixed-bottom-box{
		/* position: fixed; */
		bottom: 1;
		left: 0;
		height: 107rpx;
		width: 100%;
		border: 1rpx solid red;
		background-color: red;
	}
</style>
